<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="${ctx!}/assets/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx!}/assets/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${ctx!}/assets/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/animate.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="${ctx!}/assets/css/admin-main.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/alarm.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/cubic.css" rel="stylesheet">


    <!-- 全局js -->
    <script src="${ctx!}/assets/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctx!}/assets/js/bootstrap.min.js?v=3.3.6"></script>

    <!-- Bootstrap table -->
    <script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

    <!-- Peity -->
    <script src="${ctx!}/assets/js/plugins/peity/jquery.peity.min.js"></script>

    <script src="${ctx!}/assets/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/validate/messages_zh.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/layer/layer.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/layer/laydate/laydate.js"></script>

    <!-- 自定义js -->
    <script src="${ctx!}/assets/js/content.js?v=1.0.0"></script>
</head>
<body style="background-color:transparent;width: 100%;height: 100%;">
<div class="cubic">
    <ul>
        <li><a href="${ctx!}/web/project/alarm">&nbsp;报警监测&nbsp;</a></li>
        <li><a href="${ctx!}/web/project/maintain">&nbsp;设备保养&nbsp;</a></li>
        <li class="current"><a href="${ctx!}/web/project/selfcontroller">&nbsp;自控策略&nbsp;</a></li>
    </ul>
</div>

<div>
    <!--??用来判断是否为null-->
    <#if exist?? && exist==1>
    <div style="width: 100%;height: 100%;" align="center">
        <button onclick="removeImage()"
                style="position:absolute;float: right;border: none;border-radius: 5px;padding: 5px 10px;margin-left: 5px;margin-top: 5px;border: 1px #006E99 solid;background: rgba(0,110,153,0.3);color: white;">
            删除
        </button>
        <img style="display:inline-block;object-fit: fill;margin: 0 auto;max-height: 100%;max-width: 96%;"
             src="${ctx!}/web/project/selfcontroller/show_image">
        <div style="height: 60px;"></div>
    </div>

    <#else >

    <form id="imageForm" method="post" style="position: absolute;">
        <div style="position: relative;" align="center">
            <input id="imgSelect" type="file"
                   style="position: absolute;float: left; z-index: 10; opacity: 0;width: 100px; height: 100px;"
                   onchange="changePic(this)" accept="image/jpg,image/jpeg,image/png,image/PNG">
            <img id="imgPreview" onclick="$('#imgSelect').click();" src="${ctx!}/assets/img/empty.png" title="上传图片"
                 style="display: block;margin: 0 auto;margin-left:390px;max-height: 450px;max-width: 800px;object-fit: fill">
            <span id="txt"
                  style="font-size: 16px;color: #2861BB;font-family: 微软雅黑;font-weight: 700;margin: 20px auto;margin-left: 430px;display: block">暂无自控策略图,请点击上传</span>
        </div>
    </form>
    <button style="color: white;padding:5px 10px;border-radius:3px;border: none;background:#2591F4; position: relative;margin-top: 350px;margin-left: 500px;font-size: 18px;"
            onclick="uploadImage()">确认上传
    </button>
</div>


</#if>

</div>
<script>

    /*切换或者选择图片调用*/
    function changePic() {
        var reads = new FileReader();
        var f = document.getElementById('imgSelect').files[0];
        reads.readAsDataURL(f);
        $("#txt").remove()
        $("#imgPreview").css({
            margin:0
        })
        reads.onload = function (e) {
            document.getElementById('imgPreview').src = this.result;
        };
    }

    function uploadImage() {
        var imageSelect = $("#imgSelect")
        if (imageSelect.val() == null || imageSelect.val().trim() == '') {
            layer.msg("请先选择自控策略图");
            return;
        }
        var file = document.getElementById('imgSelect').files[0]
        var data = new FormData()
        data.append("file", file)
        $.ajax({
            type: "POST",
            url: '${ctx!}/web/project/selfcontroller/upload_image',
            data: data,
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
            processData: false, // 告诉jQuery不要去处理发送的数据
            success: function (data) {
                var data = eval('(' + data + ')')
                if (data.success) {
                    layer.msg("上传成功")
                    //重新加载一下
                    window.location.reload()
                } else {
                    layer.msg("上传失败")
                }
            }
        });
    }

    function removeImage() {
        layer.confirm("确认删除吗？", {
                btn: ['确认', '取消']
            },
            function () {
                $.ajax({
                    url: '${ctx!}/web/project/selfcontroller/remove_image',
                    success: function (data) {
                        var data = eval('(' + data + ')')
                        if (data.code == 0) {
                            layer.msg("删除成功")
                            //重新加载一下
                            window.location.reload()
                        } else {
                            layer.msg("删除失败")
                        }
                    }
                })
            }, function () {
                //取消
            })
    }
</script>
</body>
<style>
</style>
</html>
